<template>
    <div class="timeline">
        <el-timeline>
            <el-timeline-item color="#0bbd87" v-for="item,index in timelineData" :key="index" :timestamp="item.time" placement="top">
                <el-card>
                    <h4>{{item.title}}</h4>
                    <p>{{item.action}}</p>
                </el-card>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
export default {
    name:'Timeline',
    data() 
    {
        return {
            timelineData:[
                {
                    title:'搞图设计完成',
                    time:'2021/10/7',
                    action:'CC 提交于 2021/10/7 20:42'
                },
                {
                    title:'更新 Admin-1.0 Github 模板',
                    time:'2021/11/10',
                    action:'CC 提交于 2021/11/10 20:42'
                },
                {
                    title:'更新 Admin-1.1 Github 模板',
                    time:'2022/1/1',
                    action:'CC 提交于 2022/1/1 20:42'
                },
                {
                    title:'优化布局结构',
                    time:'2022/1/10',
                    action:'CC 提交于 2022/1/10 20:42'
                },
                {
                    title:'什么都没干',
                    time:'2022/5/19',
                    action:'CC 提交于 2022/5/19 20:42'
                },
                {
                    title:'优化窗口监听减少卡顿',
                    time:'2022/11/11',
                    action:'CC 提交于 2022/11/11 00:26'
                },
            ]
        }
    },
    mounted() {
        this.timelineData = this.timelineData.reverse()
    },
}
</script>

<style lang="less" scoped>
    .timeline
    {
        padding: 20px 0;
        .el-card
        {
            p
            {
                padding-top: 10px;
            }
            
        }
    }
</style>